<template>
  <div class="stat-card" :class="{ 'has-action': !!actionText }">
    <div class="stat-card__content">
      <div class="stat-card__header">
        <h3 class="stat-card__title">{{ title }}</h3>
        <div class="stat-card__icon" v-if="icon">
          <i class="fas" :class="icon"></i>
        </div>
      </div>
      
      <div class="stat-card__value">{{ formatValue(value) }}</div>
      
      <div class="stat-card__footer">
        <div class="stat-card__trend" v-if="growthRate !== undefined">
          <div 
            class="stat-card__growth" 
            :class="{ 
              'stat-card__growth--positive': growthRate > 0,
              'stat-card__growth--negative': growthRate < 0,
              'stat-card__growth--neutral': growthRate === 0 
            }"
          >
            <i class="fas" :class="growthRate > 0 ? 'fa-arrow-up' : (growthRate < 0 ? 'fa-arrow-down' : 'fa-minus')"></i>
            {{ Math.abs(growthRate) }}%
          </div>
          <span class="stat-card__period">较上周期</span>
        </div>
        
        <button v-if="actionText" class="stat-card__action" @click="$emit('action-click')">
          {{ actionText }}
          <i class="fas fa-chevron-right"></i>
        </button>
      </div>
      
      <div class="stat-card__chart" v-if="showMiniChart">
        <div class="mini-trend-chart">
          <!-- 这里可以放置迷你图表，如果有的话 -->
          <span v-for="i in 7" :key="i" class="chart-bar" :style="{ height: `${Math.random() * 50 + 10}%` }"></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
  title: {
    type: String,
    required: true
  },
  value: {
    type: [Number, String],
    required: true
  },
  icon: {
    type: String,
    default: ''
  },
  growthRate: {
    type: Number,
    default: undefined
  },
  showMiniChart: {
    type: Boolean,
    default: false
  },
  actionText: {
    type: String,
    default: ''
  },
  valuePrefix: {
    type: String,
    default: ''
  },
  valueSuffix: {
    type: String,
    default: ''
  },
  format: {
    type: String,
    default: 'default' // 可以是 'currency', 'number', 'percent', 'default'
  }
})

defineEmits(['action-click'])

// 格式化值的显示
const formatValue = (value: number | string) => {
  const numValue = typeof value === 'string' ? parseFloat(value) : value
  
  // 如果值不是有效数字，直接返回原值
  if (isNaN(numValue)) {
    return props.valuePrefix + value + props.valueSuffix
  }
  
  let formattedValue
  
  switch (props.format) {
    case 'currency':
      formattedValue = numValue.toLocaleString('zh-CN', { 
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
      })
      formattedValue = formattedValue + ' USDT'
      break
    case 'number':
      formattedValue = numValue.toLocaleString('zh-CN')
      break
    case 'percent':
      formattedValue = (numValue * 100).toFixed(1) + '%'
      break
    default:
      formattedValue = numValue.toString()
  }
  
  return props.valuePrefix + formattedValue + props.valueSuffix
}
</script>

<style scoped lang="scss">
.stat-card {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 20px;
  height: 100%;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  
  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  }
  
  &.has-action:hover {
    border-color: var(--primary-color, #FF4757);
  }
  
  &__content {
    position: relative;
    z-index: 2;
  }
  
  &__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
  }
  
  &__title {
    font-size: 16px;
    font-weight: 500;
    color: #6C757D;
    margin: 0;
  }
  
  &__icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background-color: rgba(#FF4757, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    
    i {
      color: #FF4757;
      font-size: 16px;
    }
  }
  
  &__value {
    font-size: 28px;
    font-weight: 700;
    color: #2F3542;
    margin: 12px 0;
  }
  
  &__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  &__trend {
    display: flex;
    align-items: center;
  }
  
  &__growth {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    margin-right: 8px;
    
    i {
      margin-right: 4px;
      font-size: 10px;
    }
    
    &--positive {
      background-color: rgba(#28A745, 0.1);
      color: #28A745;
    }
    
    &--negative {
      background-color: rgba(#DC3545, 0.1);
      color: #DC3545;
    }
    
    &--neutral {
      background-color: rgba(#6C757D, 0.1);
      color: #6C757D;
    }
  }
  
  &__period {
    font-size: 12px;
    color: #ADB5BD;
  }
  
  &__action {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    color: #FF4757;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    
    i {
      margin-left: 4px;
      font-size: 10px;
      transition: transform 0.2s ease;
    }
    
    &:hover i {
      transform: translateX(3px);
    }
  }
  
  &__chart {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 80px;
    height: 40px;
    opacity: 0.2;
    
    .mini-trend-chart {
      display: flex;
      align-items: flex-end;
      height: 100%;
      width: 100%;
      
      .chart-bar {
        flex: 1;
        background-color: var(--primary-color, #FF4757);
        margin: 0 1px;
        border-radius: 1px 1px 0 0;
      }
    }
  }
}

@media (max-width: 768px) {
  .stat-card {
    &__value {
      font-size: 24px;
    }
    
    &__title {
      font-size: 14px;
    }
  }
}
</style> 